<!--
 * @Description: 侧面筛选中的内容
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-08-24 10:03:52
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-11-18 19:27:11
 * @FilePath: /nhw/src/components/PopupCon/index.vue
-->
<template>
  <Popup
    get-container="body"
    close-on-popstate
    :value="show"
    position="right"
    :style="{ height: '100%', width: '7.146rem' }"
    @click-overlay="close"
  >
    <ul class="wrap">
      <!-- 按钮筛选1 start-->
      <li class="item van-hairline--bottom" v-if="btnList.length">
        <div class="title">{{ btnTitle }}</div>
        <div class="content">
          <button
            v-for="(item, index) in btnList"
            :class="{ active: item.active }"
            :key="index"
            @click="changeState(item)"
          >
            {{ item.name }}
          </button>
        </div>
      </li>
      <!-- 按钮筛选1 end-->
      <!-- 按钮筛选2 start-->
      <li class="item" v-if="btnList1.length">
        <div class="title">{{ btnTitle1 }}</div>
        <div class="content">
          <button
            v-for="(item, index) in btnList1"
            :class="{ active: item.active }"
            :key="index"
            @click="changeState(item)"
          >
            {{ item.name }}
          </button>
        </div>
      </li>
      <!-- 按钮筛选2 end-->
      <!-- 联系人 start -->
      <li class="item" v-if="contact">
        <div class="title">联系人</div>
        <div class="content">
          <Field
            v-model="contactName"
            type="text"
            placeholder="请输入联系人"
            maxlength="4"
          />
        </div>
      </li>
      <!-- 联系人 end -->
      <!-- 按钮筛选2 end-->
      <!-- 联系电话 start-->
      <li class="item" v-if="phone">
        <div class="title">联系电话</div>
        <div class="content">
          <Field
            v-model="tel"
            type="tel"
            placeholder="请输入联系电话"
            maxlength="11"
          />
        </div>
      </li>
      <!-- 联系电话 end -->
      <!-- 时间 start-->
      <li class="item" v-if="date">
        <div class="title">发现时间</div>
        <div class="content" :style="{ flexWrap: 'nowrap' }">
          <Field
            type="text"
            placeholder="请选择开始时间"
            readonly
            @click.stop="showStartDate"
            :value="startDate | formatDate"
            input-align="center"
          />
          <span style="margin: 0 5px; color: #c6a86f; line-height: 0.61rem"
            >__</span
          >
          <Field
            type="text"
            placeholder="请选择结束时间"
            readonly
            @click.stop="showEndDate"
            :value="endDate | formatDate"
            input-align="center"
          />
        </div>
      </li>
      <!-- 时间 end -->
    </ul>
    <!-- 底部按钮 start-->
    <div class="btn-wrap">
      <Button text="重置" color="#CACDD1" plain hairline @click.stop="reset" />
      <Button
        text="确认"
        color="#E16712"
        plain
        hairline
        @click.stop="confirm"
      />
    </div>
    <!-- 底部按钮 end-->
    <!-- 开始时间 picker start-->
    <Popup
      close-on-popstate
      get-container="body"
      v-model="showstart"
      position="bottom"
      :style="{ height: '42%', width: '100vw' }"
    >
      <DatetimePicker
        v-model="startDate"
        type="datehour"
        title="选择开始时间"
        :min-date="minDate"
        :max-date="maxDate"
        item-height="1rem"
        @confirm="closeDatePicker"
        @cancel="closeDatePicker"
      />
    </Popup>
    <!-- 开始时间 picker end-->
    <!-- 结束时间 picker start -->
    <Popup
      close-on-popstate
      get-container="body"
      v-model="showend"
      position="bottom"
      :style="{ height: '42%', width: '100vw' }"
    >
      <DatetimePicker
        v-model="endDate"
        type="datehour"
        title="选择结束时间"
        :min-date="minDate"
        :max-date="maxDate"
        item-height="1rem"
        @confirm="closeDatePicker"
        @cancel="closeDatePicker"
      />
    </Popup>
    <!-- 结束时间 picker start -->
    <!-- </div> -->
  </Popup>
</template>

<script>
import formateDate from "@/utils/formateDate.js";
import { Button, Field, DatetimePicker, Popup } from "vant";
export default {
  name: "Popupcontainer",

  components: { Button, Field, DatetimePicker, Popup },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    btnList: {
      //1
      type: Array,
      default: () => [],
    },
    btnList1: {
      //2
      type: Array,
      default: () => [],
    },
    phone: {
      //是否显示联系人电话
      type: Boolean,
      default: false,
    },
    contact: {
      //是否显示联系人
      type: Boolean,
      default: false,
    },
    date: {
      //是否显示开始结束时间
      type: Boolean,
      default: false,
    },
    btnTitle: {
      // title1
      type: String,
      default: "任务状态",
    },
    btnTitle1: {
      // title2
      type: String,
      default: "整改状态",
    },
    radio: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    show(newValue) {
      if (newValue) {
        this.lastList = {
          tel: this.tel,
          contactName: this.contactName,
          startDate: this.startDate,
          endDate: this.endDate,
        };

        this.lastBtnList = JSON.stringify(this.btnList);
      }
    },
  },
  computed: {
    minDate() {
      return new Date(
        this.curDate.getFullYear() - 1,
        this.curDate.getMonth(),
        this.curDate.getDate()
      );
    },
    maxDate() {
      return new Date(
        this.curDate.getFullYear() + 2,
        this.curDate.getMonth(),
        this.curDate.getDate()
      );
    },
  },
  data() {
    return {
      lastList: {},
      lastBtnList: [],
      curDate: new Date(),
      showstart: false,
      showend: false,
      tel: "",
      contactName: "",
      startDate: null,
      endDate: null,
    };
  },

  mounted() {},

  methods: {
    changeState(item) {
      if (this.radio) {
        this.btnList.forEach((item) => {
          item.active = false;
        });
      }
      item.active = !item.active;
    },
    showEndDate() {
      this.showend = true;
    },
    showStartDate() {
      this.showstart = true;
    },
    closeDatePicker() {
      this.showstart = false;
      this.showend = false;
    },
    //关闭
    close() {
      this.$emit("close", JSON.parse(this.lastBtnList));

      ({
        tel: this.tel,
        contactName: this.contactName,
        startDate: this.startDate,
        endDate: this.endDate,
      } = this.lastList);
    },
    //重置
    reset() {
      this.$emit("reset");
      this.tel = "";
      this.contactName = "";
      this.startDate = null;
      this.endDate = null;
      this.$emit("close");
    },
    //确认
    confirm() {
      this.$emit("confirm", {
        startDate: this.startDate ? formateDate(this.startDate) : "",
        endDate: this.endDate ? formateDate(this.endDate) : "",
        tel: this.tel,
        contactName: this.contactName,
      });
      this.$emit("close");
    },
  },
};
</script>

<style lang="less" scoped>
@import url("~style/mixin.less");
@import url("~style/var.less");
.van-popup {
  box-sizing: border-box;
  padding-top: 10px;
  .item {
    margin-bottom: 20px;
    &:first-of-type {
      .content {
        padding-bottom: 33px;
      }
    }
  }

  .title {
    color: #6e6e6e;
    line-height: 2em;
    font-weight: bolder;
    font-size: 26px;
    text-indent: 1em;
  }
  .content {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 20px;
    box-sizing: border-box;
    .van-field {
      padding: 10px 10px;
      margin: 0 auto;
      background: #f6f6f6;
      border-radius: 4px;
      font-size: 24px;
    }
    button {
      width: 156px;
      height: 58px;
      margin: 4px;
      font-size: 25px;
      color: #6e6e6e;
      background: #f6f6f6;
      padding: 0px;
      position: relative;
      border-radius: 4px;
      box-sizing: border-box;
      white-space: nowrap;
      &.active {
        border: 2px solid;
        border-color: @primary;
        background: #fff;
      }
      &.active::after {
        content: "\F0C8";
        position: absolute;
        bottom: -2px;
        right: -2px;
        height: 30px;
        background-repeat: no-repeat;
        font-family: "vant-icon";
        color: #fff;
        text-indent: 16px;
        line-height: 1.7;
        border-bottom-right-radius: 4px;
        background-image: linear-gradient(
          146deg,
          transparent 0%,
          transparent 50%,
          @primary 50%,
          @primary 100%
        );
      }
    }
  }

  .btn-wrap {
    width: 100%;
    position: absolute;
    bottom: 48px;
    margin-right: 73px;
    backdrop-filter: blur(20px);
    .flex();
    .van-button {
      margin: 0 20px;
      padding: 0 40px;
      height: 0.8rem;
    }
  }
  /deep/ .van-field__control::placeholder {
    color: #6e6e6e;
  }
}
</style>